<template>
  <div class="box">
    <navBar :navBar="navBar" :callback="onClickRight"></navBar>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('没有更多了')"
          :error-text="$t('没有更多了')"
          @load="getList"
        >
          <van-cell v-for="(item, index) in helpList" :key="index" class="item">
            <div class="leftInner">
				<p>时间：{{ getdate(item.addtime) }}</p>
				<p>金额：{{ item.amount }}</p>
				<p>类型：{{ item.coin }}</p>
				<div style="display: flex;justify-content: flex-start;">
					<p >状态：</p>
					<div class="rightInner" v-html="formatStatus(item.status)"></div>
				</div>
				
              <!-- <p class="title">
                {{ $t("数量") }}:{{ item.amount }}{{ item.coin }}
              </p>
              <p class="time">{{ getdate(item.addtime) }}</p> -->
            </div>
            <!-- <div class="rightInner" v-html="formatStatus(item.status)"></div> -->
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("充值明细"),
        close: false,
        btn: "",
      },
      loading: false,
      finished: false,
      refreshing: false,
      pageSize: 10,
      pageNumber: 0,
      totalElements: 0,
      helpList: [],
    };
  },

  mounted() {},

  methods: {
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.pageNumber = 0;
      this.helpList = [];
      this.getList();
    },
    formatStatus(s) {
      if (s == 0) {
        return this.$t("待审核");
      } else if (s == 1) {
        return "<span style='color:#008000'>" + this.$t("成功") + "</span>";
      } else if (s == 2) {
        return "<span style='color:red'>" + this.$t("失败") + "</span>";
      }
    },
    //时间戳转日期
    getdate(nS) {
      //var offset = 	new Date().getTimezoneOffset() / 60 + 1;
      //console.log(offset);
      //var date = new Date(nS*1000 + offset * 3600  * 1000);  //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(nS*1000);
	  var year = date.getFullYear(),
        month = ("0" + (date.getMonth() + 1)).slice(-2),
        sdate = ("0" + date.getDate()).slice(-2),
        hour = ("0" + date.getHours()).slice(-2),
        minute = ("0" + date.getMinutes()).slice(-2),
        second = ("0" + date.getSeconds()).slice(-2);
      // 拼接
      var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute;
      // 返回
      return result;
    },
    // 获取列表
    getList() {
      // 参考请求数据分页写法
      if (this.refreshing) {
        this.helpList = [];
        this.pageNumber = 0;
        this.refreshing = false;
      }
      let data = {
        page: this.pageNumber,
        rows: this.pageSize,
        type: 1,
      };
      $postAxios(api.getRecord, data, (res) => {
        if (res.code == 0) {
          this.totalElements = res.count;
          if (this.pageNumber == 0) {
            this.helpList = res.data;
          } else {
            this.helpList = this.helpList.concat(res.data);
          }
          this.pageNumber++;
          this.loading = false;
          if (this.helpList.length === this.totalElements) {
            this.finished = true;
          }
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
    onClickRight() {
      this.$router.push({
        name: "onlineService",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #21212b;
  .content {
    // padding: 10px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 44px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .item {
		display: flex;
		flex-direction: column;
      padding: 18px 29px;
	  font-size: 14px;
	  border-bottom: 0.026666rem solid #000;
	  color: #fff;
	  background-color: #111723;
      .van-cell__value {
        display: flex;
        align-items: center;
        justify-content: space-between;
		color: #fff;
        .leftInner {
          .title {
            margin-bottom: 5px;
            font-size: 14px;
            font-weight: 700;
			color: #fff;
          }
          p {
			  height: 29px;
            font-size: 13px;
            line-height: 1.5;
			color: #fff;
          }
        }
        .rightInner {
          color: orange;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
